<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="robots" content="index,nofollow" />
<meta name="keywords" content"="HTML_Progress, progress meter" />
<meta name="description" content="horizontal progress meter with javascript customization " />
<meta name="author" content="Laurent Laville" />
<title>PEAR::HTML::Progress example: Blue Sand Plus</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../examples.css" />
</head>
<body>

<a name="top">

<p><a href="../index.html"><img src="../images/home.gif" alt="Examples TOC"/>examples</a></p>

<h1><span class="chapter">Blue Sand Plus </span></h1>

<p align="right">$Date: 2005/07/25 10:25:30 $</p>

<div class="toc">&nbsp;Table of contents </div>
<ul>
<li><a href="#intro">Introduction<a>
<li><a href="#render">Render options<a>
<li><a href="#output">Ouput</a>
<li><a href="#source">PHP source syntax highlight<a>
<li><a href="#run">Play demo<a>
</ul>


<a name="intro">
<h2><img src="../images/info.gif"/> Introduction</h2>

<p>This example requires :
<ul>
<li>PEAR::HTML_Progress 1.2.2 or better.</li>
</ul>
</p>

<hr/>
<p><b>This example will run a natural horizontal ProgressBar with blue skin.
It will also show you how to print something inside cells with an external javascript
(replaced internal code).</b></p>

<p>Percent text info is centered on a 60 pixels width area,
on right side of the progress bar.</p>

<p>[<a href="#top">Top</a>]</p>


<a name="render">
<h2><img src="../images/config.gif"/>&nbsp;Render options </h2>

Here are options to build the progress bar cells :
<pre>
active-color   = #3874B4
inactive-color = #EEEECC
width          = 10
</pre>
<div class="fig">HTML_Progress_UI::setCellAttributes()</div>

Here are options to build the progress bar border :
<pre>
width = 1
color = navy
</pre>
<div class="fig">HTML_Progress_UI::setBorderAttributes()</div>

Here are options to build the progress bar string (percent text info):
<pre>
width            = 60
font-size        = 14
background-color = #EEEEEE
align            = center
</pre>
<div class="fig">HTML_Progress_UI::setStringAttributes()</div>

Here is the external javascript source-code which replace internal code :
<pre>
var isDom = document.getElementById?true:false;
var isIE  = document.all?true:false;
var isNS4 = document.layers?true:false;
var cellCount = 10;

function setprogress(pIdent, pValue, pString, pDeterminate)
{
        if (isDom)
            prog = document.getElementById(pIdent+'installationProgress');
        if (isIE)
            prog = document.all[pIdent+'installationProgress'];
        if (isNS4)
            prog = document.layers[pIdent+'installationProgress'];
        if (prog != null)
            prog.innerHTML = pString;

        if (pValue == pDeterminate) {
            for (i=0; i < cellCount; i++) {
                showCell(i, pIdent, "hidden");
            }
        }
        if ((pDeterminate > 0) && (pValue > 0)) {
            i = (pValue-1) % cellCount;
            showCell(i, pIdent, "visible");
        } else {
            for (i=pValue-1; i >=0; i--) {
                showCell(i, pIdent, "visible");
                if (isDom)
                    document.getElementById(pIdent+'progressCell'+i+'A').innerHTML = i;
                if (isIE)
                    document.all[pIdent+'progressCell'+i+'A'].innerHTML = i;
                if (isNS4)
                    document.layers[pIdent+'progressCell'+i+'A'].innerHTML = i;
            }
    }
}

function showCell(pCell, pIdent, pVisibility)
{
    if (isDom)
        document.getElementById(pIdent+'progressCell'+pCell+'A').style.visibility = pVisibility;
    if (isIE)
        document.all[pIdent+'progressCell'+pCell+'A'].style.visibility = pVisibility;
    if (isNS4)
        document.layers[pIdent+'progressCell'+pCell+'A'].style.visibility = pVisibility;

}
</pre>
<div class="fig">href:&nbsp; ./progress_number.js</div>

<p>[<a href="#top">Top</a>]</p>


<a name="output">
<h2><img src="../images/image.gif"/>&nbsp;Output</h2>
<h3>Screenshot </h3>
<p><img src="../screenshots/bluesandplus.png"/></p>
<p>[<a href="#top">Top</a>]</p>


<a name="source">
<h2><img src="../images/source.gif"/>&nbsp;PHP source syntax highlight</h2>
<a target="_blank" href="../highlighter.php?file=./horizontal/bluesandplus.php">Open</a> source listing in a new window.

<p>[<a href="#top">Top</a>]</p>


<a name="run">
<h2><img src="../images/run.gif"/>&nbsp;Play demo</h2>
<p><a href="bluesandplus.php">Run</a> the script.</p>

<p>[<a href="#top">Top</a>]</p>

</body>
</html>